<template>
  <el-card style="margin-bottom: 10px;">
    共{{ listData.length || 0 }}个群聊
  </el-card>
  <div>
    <el-card
      v-for="item in listData"
      :key="item.id"
      style="width: 320px;"
    >
      <div class="content">
        <el-avatar
          :size="40"
          :src="item.avatar"
          @error="() => true"
        >
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
        </el-avatar>
        <div class="des">
          <div class="t">
            {{ item.topic || '' }}
          </div>
          <p class="count">
            {{ item.memberIdList.length || 0 }}人
          </p>
        </div>
      </div>
      <template #footer>
        <div class="footer">
          <el-icon @click="settingClick(item)">
            <Setting />
          </el-icon>
          <el-divider direction="vertical" />
          <el-icon @click="onEditClick(item)">
            <Edit />
          </el-icon>
          <el-divider direction="vertical" />
          <el-icon @click="openSayDialog(item)">
            <ChatDotRound />
          </el-icon>
        </div>
      </template>
    </el-card>
  </div>

  <el-dialog
    v-model="dialogMsgVisible"
    title="发消息给：摇钱树自媒体运营群"
    width="550"
  >
    <el-form
      ref="formMsgRef"
      :model="msgFormData"
      :rules="msgRules"
    >
      <el-form-item
        label="内容:"
        prop="content"
      >
        <el-input
          v-model="msgFormData.content"
          placeholder="请输入"
          type="textarea"
          :autosize="{ minRows: 4 }"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="sayConfirm(formMsgRef)"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-model="editVisible"
    title="修改"
    width="550"
  >
    <el-form
      ref="formEditRef"
      :model="editFormData"
      :rules="editRules"
      label-width="100"
    >
      <el-form-item
        label="群编码(字母):"
      >
        <el-input
          v-model="editFormData.joinCode"
          placeholder="请输入"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="入群欢迎语:"
      >
        <el-input
          v-model="editFormData.roomJoinReply"
          placeholder="请输入"
          type="textarea"
          :autosize="{ minRows: 2 }"
        />
      </el-form-item>
      <el-form-item
        label="机器人控制:"
      >
        <el-switch
          v-model="editFormData.control"
          inline-prompt
          active-text="允许"
          inactive-text="禁止"
        />
      </el-form-item>
      <el-form-item
        label="开启自动加群:"
      >
        <el-switch
          v-model="editFormData.autojoin"
          inline-prompt
          active-text="打开"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-text>
        <el-icon><QuestionFilled /></el-icon>
        打开自动加群，当机器人收到加群指令消息后，会回复该群名称。
      </el-text>
      <el-form-item
        label="群员违规上限:"
      >
        <el-input-number
          v-model="editFormData.maxFoul"
          controls-position="right"
        />
      </el-form-item>
      <el-text>
        <el-icon><QuestionFilled /></el-icon>
        每违规一次，机器人会发出警告，次数达到上限将会被机器人移出群聊。
      </el-text>
      <el-form-item
        label="接入优惠券:"
      >
        <el-switch
          v-model="editFormData.onCoupon"
          inline-prompt
          active-text="打开"
          inactive-text="关闭"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editVisible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="editConfirm(formEditRef)"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="js">
import { userStore } from '@/stores'
import { onMounted, reactive, ref, toRaw } from 'vue'
import { getGroupList, editGroup, say, setting } from '@/apis/mygroup'
import { ElMessage } from 'element-plus'

const user = userStore()

const listData = ref({})
const currentVal = ref({})
const editId = ref()

const formMsgRef = ref()
const formEditRef = ref()
const dialogMsgVisible = ref(false)
const editVisible = ref(false)

const msgFormData = reactive({
  content: ''
})
const msgRules = reactive({
  content: [{ required: true, message: '请输入', trigger: 'blur' }]
})

const editFormData = reactive({
  joinCode: '',
  roomJoinReply: '',
  control: false,
  autojoin: false,
  maxFoul: 0,
  onCoupon: false
})
const editRules = reactive({})

onMounted(() => {
  fetchList()
})

function fetchList () {
  getGroupList({ id: user.robotId }).then(res => {
    listData.value = res.data || []
  })
}

const settingClick = (item) => {
  setting(item.id).then(res => {
    res.success && ElMessage({
      message: '操作成功！',
      type: 'success'
    })
  })
}

const onEditClick = (item) => {
  editVisible.value = true
  editId.value = item._id
  editFormData.joinCode = item.joinCode
  editFormData.roomJoinReply = item.roomJoinReply
  editFormData.control = item.control
  editFormData.autojoin = item.autojoin
  editFormData.maxFoul = item.maxFoul
  editFormData.onCoupon = item.onCoupon
}
const editConfirm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (!editId.value) return
      const payload = toRaw(editFormData)
      editGroup(editId.value, payload).then(res => {
        editVisible.value = false
        fetchList()
        res.success && ElMessage({
          message: '操作成功！',
          type: 'success'
        })
      })
    }
  })
}

const openSayDialog = (item) => {
  currentVal.value = {
    id: item.id,
    name: item.topic
  }
  dialogMsgVisible.value = true
}
const sayConfirm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      const payload = {
        content: msgFormData.content,
        id: currentVal.value.id,
        name: currentVal.value.name
      }
      say(payload).then(res => {
        dialogMsgVisible.value = false
        res.success && ElMessage({
          message: '操作成功！',
          type: 'success'
        })
      })
    }
  })
}

</script>

<style lang="scss" scoped>
.content{
  display: flex;
  .des{
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    .t{
      overflow: hidden;
      color: rgba(0, 0, 0, .85);
      font-weight: 500;
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .count{
      font-size: 14px;
      color: rgba(0, 0, 0, .45);
      margin-top: 8px;
    }
  }
}
.footer{
  display: flex;
  align-items: center;
  justify-content: space-around;
  .el-icon{
    cursor: pointer;
    &:hover{
      color: var(--el-color-primary);
    }
  }
}
</style>
